import React, { useState } from 'react'
import './App.css'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
export default function App() {
    let [todos, setTodos] = useState([
        {
            id:Math.random().toString(36).slice(2),
            title:'吃饭',
            isDone:true
        },
        {
            id:Math.random().toString(36).slice(2),
            title:'睡觉',
            isDone:true
        },
        {
            id:Math.random().toString(36).slice(2),
            title:'敲代码',
            isDone:false
        }
    ])

    function addTodo(title){
        let todo = {
            id:Math.random().toString(36).slice(2),
            title,
            isDone:false
        }
        todos.push(todo)
        setTodos([...todos])
    }
    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <Header addTodo={addTodo}/>
                <List todos={todos}/>
                <Footer />
            </div>
        </div>
    )
}
